<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI博客 - lumina AI</title>
    <script src="../assets/js/tailwindcss.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFE45C',
                        secondary: '#FFE45C',
                        accent: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px'
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-in-out'
                    }
                }
            }
        }
    </script>
    <link href="../assets/css/google-fonts-pacifico-inter.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="../assets/css/lemon-milk.css" rel="stylesheet">
    <link href="../assets/css/google-fonts-montserrat.css" rel="stylesheet">
    <link href="../assets/css/BlogsIndex.css" rel="stylesheet">
    <!-- 移除API配置，使用纯前端JSON数据 -->
</head>
<body class="min-h-screen font-['Inter'] scroll-smooth bg-gray-50 flex flex-col">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 border-b border-gray-100 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="text-2xl text-black" style="font-family: 'Montserrat', Arial, sans-serif;">lumina AI</span>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center gap-8 justify-center flex-1">
                <a href="../index.html" class="font-medium transition-colors duration-200">主页</a>
                <a href="../AiEntry/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI词条</a>
                <a href="../AiOpen/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI开源</a>
                <a href="../AiHardware/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI硬件</a>
                <a href="../AiPrompts/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">指令库</a>
                <a href="./index.html" class="text-[#FFE45C] hover:text-[#FFE45C] font-medium transition-colors duration-200">博客</a>
            </nav>
            
            <!-- 工具区域 -->
            <div class="flex items-center gap-4">
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fab fa-weixin"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg px-3 py-2 transition-colors duration-200 active:bg-gray-200">
                    <i class="fas fa-globe"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg px-3 py-2 transition-colors duration-200 active:bg-gray-200">
                    <i class="fas fa-user"></i>
                </button>
                <button class="md:hidden w-10 h-10 flex items-center justify-center text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg transition-colors duration-200 active:bg-gray-200" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
            <div class="px-4 py-6 space-y-4">
                <a href="../index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">主页</a>
                <a href="../AiEntry/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI词条</a>
                <a href="../AiOpen/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI开源</a>
                <a href="../AiHardware/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI硬件</a>
                <a href="../AiPrompts/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">指令库</a>
                <a href="./index.html" class="block text-[#FFE45C] font-medium py-2">博客</a>
            </div>
        </div>
    </header>

    <main class="pt-16 flex-1">
        <!-- 固定搜索框 -->
        <div id="fixedSearchBar" class="fixed top-16 left-0 right-0 bg-white/95 backdrop-blur-md z-40 border-b border-gray-200 shadow-sm transform -translate-y-full transition-transform duration-300">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                <div class="flex items-center gap-4">
                    <div class="flex-1">
                        <div class="relative">
                            <input 
                                type="text" 
                                id="fixedSearchInput" 
                                placeholder="搜索博客文章..." 
                                class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm transition-all duration-200 hover:border-gray-300"
                            >
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    <button 
                        id="fixedClearFilters" 
                        onclick="clearAllFilters()" 
                        class="text-sm text-gray-500 hover:text-primary transition-colors duration-200 flex items-center gap-1 px-3 py-1 rounded-lg hover:bg-gray-100"
                    >
                        <i class="fas fa-times mr-1"></i>
                        清除
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 博客头部 -->
        <section class="relative bg-gradient-to-br from-white via-gray-50 to-white border-b border-gray-200 overflow-hidden blog-header">
            <!-- 流体动画背景 -->
            <div class="absolute inset-0 z-0">
                <div class="fluid-animation">
                    <div class="fluid-blob blob-1"></div>
                    <div class="fluid-blob blob-2"></div>
                    <div class="fluid-blob blob-3"></div>
                    <div class="fluid-blob blob-4"></div>
                </div>
            </div>
            
            <!-- 主要内容区域 -->
            <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- 标题区域 -->
                <div class="text-center py-16 sm:py-20 lg:py-24">
                    <div class="mb-8">
                        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                            AI思考与洞察
                        </h1>
                        <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                            分享AI行业洞察、趋势分析与创新思考，启发你的AI未来视野
                        </p>
                    </div>
                    
                    <!-- 搜索和筛选区域 -->
                    <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 sm:p-8 shadow-lg border border-gray-100/50 max-w-4xl mx-auto">
                        <!-- 搜索功能 -->
                        <div class="mb-6">
                            <div class="relative">
                                <input 
                                    type="text" 
                                    id="searchInput" 
                                    placeholder="搜索博客文章..." 
                                    class="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-lg transition-all duration-200 hover:border-gray-300"
                                >
                                <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                            </div>
                        </div>
                        
                        <!-- 标签筛选 -->
                        <div>
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="text-sm font-semibold text-gray-700 flex items-center">
                                    <i class="fas fa-tags mr-2 text-primary"></i>
                                    按标签筛选
                                </h4>
                                <button 
                                    id="clearFilters" 
                                    onclick="clearAllFilters()" 
                                    class="text-sm text-gray-500 hover:text-primary transition-colors duration-200 flex items-center gap-1 px-3 py-1 rounded-lg hover:bg-gray-100"
                                >
                                    <i class="fas fa-times mr-1"></i>
                                    清除
                                </button>
                            </div>
                            <div id="filterTags" class="flex flex-wrap gap-3">
                                <!-- 标签将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主要内容区域 -->
        <section class="py-8 sm:py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 lg:gap-8">
                    <!-- 左侧博客列表 -->
                    <div class="lg:col-span-3">
                        <!-- 博客文章列表 -->
                        <div id="blogList" class="space-y-4 sm:space-y-6">
                            <!-- 文章卡片将通过JavaScript动态生成 -->
                        </div>

                        <!-- 分页 -->
                        <div id="pagination" class="flex justify-center mt-6 sm:mt-8">
                            <!-- 分页将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 右侧边栏 -->
                    <div class="lg:col-span-1">
                        <div class="sticky top-24 space-y-4 sm:space-y-6">
                            <!-- 热门文章 -->
                            <div class="bg-white rounded-xl p-6 shadow-sm">
                                <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center">
                                    <i class="fas fa-fire text-red-500 mr-2"></i>热门文章
                                </h3>
                                <div id="relatedArticlesSidebar" class="space-y-4">
                                    <!-- 相关文章将通过JavaScript动态生成 -->
                                </div>
                            </div>

                            <!-- 公众号二维码 -->
                            <div class="bg-gradient-to-br from-primary to-yellow-400 rounded-xl p-6 text-center">
                                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fab fa-weixin text-white text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-900 mb-2">关注公众号</h3>
                               <div class="bg-white rounded-lg p-4 mb-4">
                                    <div class="w-32 h-32 bg-gray-200 rounded-lg mx-auto flex items-center justify-center">
                                        <i class="fas fa-qrcode text-gray-400 text-4xl"></i>
                                    </div>
                                    <p class="text-xs text-gray-600 mt-2">公众号二维码</p>
                                </div>
                                <p class="text-xs text-gray-700">扫码关注 lumina AI</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-50 text-gray-500 py-8 border-t border-gray-200 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="mb-2 text-base font-semibold text-gray-700 site-description"></div>
            <div class="text-xs text-gray-400 icp-number"></div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="../assets/js/common.js"></script>
    <script>
        // 博客数据管理
        class BlogManager {
            constructor() {
                this.blogs = [];
                this.categories = [];
                this.authors = [];
                this.tags = [];
                this.currentPage = 1;
                this.itemsPerPage = 10;
                this.currentFilter = 'all';
                this.searchQuery = '';
                this.selectedTags = [];
                this.filteredBlogs = [];
            }

            // 加载博客数据
            async loadBlogData() {
                try {
                    // 从本地JSON文件加载数据
                    await this.loadLocalData();
                } catch (error) {
                    console.error('本地数据加载失败:', error);
                    // 显示错误信息
                    this.showErrorMessage();
                }
            }
            
            // 从本地JSON文件加载数据（主要方案）
            async loadLocalData() {
                try {
                    console.log('开始从本地JSON文件加载数据...');
                    const response = await fetch('./Blogs.json');
                    console.log('JSON文件响应状态:', response.status);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    
                    const data = await response.json();
                    console.log('JSON数据加载成功:', data);
                    
                    // 处理博客数据字段映射
                    this.blogs = (data.blogs || []).map(blog => ({
                        ...blog,
                        // 统一字段名并确保所有必要字段都有默认值
                        publish_date: blog.publishDate || blog.publish_date || '未知日期',
                        read_count: Number(blog.readCount || blog.read_count || 0),
                        like_count: Number(blog.likeCount || blog.like_count || 0),
                        comment_count: Number(blog.commentCount || blog.comment_count || 0),
                        author_title: blog.authorTitle || blog.author_title || '',
                        is_hot: Boolean(blog.isHot || blog.is_hot || false),
                        is_featured: Boolean(blog.isFeatured || blog.is_featured || false),
                        icon_color: blog.iconColor || blog.icon_color || 'blue',
                        slug: blog.slug || `blog-${blog.id}`, // 如果没有slug，生成一个
                        // 确保其他必要字段也有默认值
                        title: blog.title || '无标题',
                        summary: blog.summary || '无摘要',
                        category: blog.category || '未分类',
                        author: blog.author || '未知作者',
                        tags: Array.isArray(blog.tags) ? blog.tags : []
                    }));
                    
                    console.log('处理后的博客数据:', this.blogs);
                    
                    this.categories = data.categories || [];
                    this.authors = data.authors || [];
                    this.tags = data.tags || [];
                    
                    console.log('分类数据:', this.categories);
                    console.log('作者数据:', this.authors);
                    console.log('标签数据:', this.tags);
                    
                    // 恢复阅读量数据
                    this.restoreReadCounts();
                    
                    console.log('开始渲染页面...');
                    this.renderBlogs();
                    this.renderRelatedArticlesSidebar();
                    this.renderFilterTags();
                    
                    console.log('成功从本地JSON加载博客数据:', this.blogs.length, '篇文章');
                } catch (error) {
                    console.error('加载本地数据失败:', error);
                    throw error;
                }
            }



            // 恢复阅读量数据
            restoreReadCounts() {
                const savedReadCounts = localStorage.getItem('blogReadCounts');
                if (savedReadCounts) {
                    try {
                        const readCounts = JSON.parse(savedReadCounts);
                        readCounts.forEach(item => {
                            const blog = this.blogs.find(b => b.id === item.id);
                            if (blog && typeof item.read_count === 'number' && !isNaN(item.read_count)) {
                                blog.read_count = item.read_count;
                            }
                        });
                    } catch (error) {
                        console.error('恢复阅读量数据失败:', error);
                    }
                }
            }

            // 渲染博客列表
            renderBlogs() {
                const blogList = document.getElementById('blogList');
                if (!blogList) {
                    console.error('未找到博客列表容器');
                    return;
                }

                const filteredBlogs = this.getFilteredBlogs();
                console.log('过滤后的博客数量:', filteredBlogs.length);
                
                const startIndex = (this.currentPage - 1) * this.itemsPerPage;
                const endIndex = startIndex + this.itemsPerPage;
                const pageBlogs = filteredBlogs.slice(startIndex, endIndex);
                
                console.log('当前页博客数量:', pageBlogs.length);

                blogList.innerHTML = pageBlogs.map(blog => this.createBlogCard(blog)).join('');
                
                // 渲染分页
                this.renderPagination();
            }

            // 获取过滤后的博客
            getFilteredBlogs() {
                let filtered = [...this.blogs];
                
                // 按分类过滤
                if (this.currentFilter !== 'all') {
                    filtered = filtered.filter(blog => blog.category === this.currentFilter);
                }

                // 按搜索关键词过滤
                if (this.searchQuery.trim()) {
                    const query = this.searchQuery.toLowerCase();
                    filtered = filtered.filter(blog => 
                        blog.title.toLowerCase().includes(query) ||
                        blog.summary.toLowerCase().includes(query) ||
                        blog.category.toLowerCase().includes(query) ||
                        blog.author.toLowerCase().includes(query) ||
                        (blog.author_title && blog.author_title.toLowerCase().includes(query)) ||
                        blog.tags.some(tag => tag.toLowerCase().includes(query))
                    );
                }

                // 按标签过滤
                if (this.selectedTags.length > 0) {
                    filtered = filtered.filter(blog => 
                        this.selectedTags.some(selectedTag => 
                            blog.tags.includes(selectedTag)
                        )
                    );
                }

                // 按发布日期排序（最新在前）
                filtered.sort((a, b) => new Date(b.publish_date) - new Date(a.publish_date));

                this.filteredBlogs = filtered;
                return filtered;
            }

            // 创建博客卡片HTML
            createBlogCard(blog) {
                const tagsHTML = blog.tags.map(tag => 
                    `<span class="inline-block bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full mr-2 mb-2">${tag}</span>`
                ).join('');
                
                return `
                    <article class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
                        <div class="p-6">
                            <div class="flex items-start gap-4">
                                <div class="flex-shrink-0">
                                    <div class="w-12 h-12 rounded-lg bg-${blog.icon_color || 'blue'}-100 flex items-center justify-center">
                                        <i class="${blog.icon || 'fas fa-file-alt'} text-${blog.icon_color || 'blue'}-600 text-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="inline-block bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">${blog.category}</span>
                                        ${blog.is_hot ? '<span class="inline-block bg-red-100 text-red-700 text-xs px-2 py-1 rounded-full">热门</span>' : ''}
                                        ${blog.is_featured ? '<span class="inline-block bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded-full">推荐</span>' : ''}
                                    </div>
                                    <h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="./blog-detail.html?slug=${blog.slug}" class="hover:text-primary">${blog.title}</a>
                                    </h3>
                                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">${blog.summary}</p>
                                    <div class="flex items-center justify-between text-xs text-gray-500 mb-3">
                                        <span>${blog.publish_date}</span>
                                        <span class="flex items-center gap-3">
                                            <span><i class="fas fa-user mr-1"></i>${blog.author}</span>
                                            ${blog.author_title ? `<span class="text-gray-400">${blog.author_title}</span>` : ''}
                                        </span>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div class="flex flex-wrap gap-1">
                                            ${tagsHTML}
                                        </div>
                                        <div class="flex items-center gap-3 text-xs text-gray-500">
                                            <span><i class="fas fa-eye mr-1"></i>${this.formatNumber(blog.read_count)}</span>
                                            <span><i class="fas fa-heart mr-1"></i>${this.formatNumber(blog.like_count)}</span>
                                            <span><i class="fas fa-comment mr-1"></i>${this.formatNumber(blog.comment_count)}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                `;
            }

            // 渲染相关文章侧边栏
            renderRelatedArticlesSidebar() {
                const sidebar = document.getElementById('relatedArticlesSidebar');
                if (!sidebar) return;

                // 获取热门和推荐博客
                const featuredBlogs = this.blogs
                    .filter(blog => blog.is_hot || blog.is_featured)
                    .slice(0, 5);

                if (featuredBlogs.length === 0) {
                    sidebar.innerHTML = '<p class="text-gray-500 text-sm">暂无推荐文章</p>';
                    return;
                }

                const articlesHTML = featuredBlogs.map(blog => `
                    <div class="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 rounded-lg bg-${blog.icon_color || 'blue'}-100 flex items-center justify-center">
                                <i class="${blog.icon || 'fas fa-file-alt'} text-${blog.icon_color || 'blue'}-600 text-sm"></i>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm font-medium text-gray-900 line-clamp-2 hover:text-primary">
                                <a href="./blog-detail.html?slug=${blog.slug}">${blog.title}</a>
                            </h4>
                            <p class="text-xs text-gray-500 mt-1">${this.formatNumber(blog.read_count)} 阅读</p>
                        </div>
                    </div>
                `).join('');

                sidebar.innerHTML = articlesHTML;
            }

            // 渲染筛选标签
            renderFilterTags() {
                const filterTags = document.getElementById('filterTags');
                if (!filterTags) return;

                const tagColors = [
                    'bg-yellow-100 text-yellow-700 hover:bg-yellow-200 border-yellow-200',
                    'bg-blue-100 text-blue-700 hover:bg-blue-200 border-blue-200',
                    'bg-green-100 text-green-700 hover:bg-green-200 border-green-200',
                    'bg-purple-100 text-purple-700 hover:bg-purple-200 border-purple-200',
                    'bg-pink-100 text-pink-700 hover:bg-pink-200 border-pink-200',
                    'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 border-indigo-200',
                    'bg-red-100 text-red-700 hover:bg-red-200 border-red-200',
                    'bg-orange-100 text-orange-700 hover:bg-orange-200 border-orange-200',
                    'bg-teal-100 text-teal-700 hover:bg-teal-200 border-teal-200',
                    'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-200'
                ];

                filterTags.innerHTML = this.tags.map((tag, index) => {
                    const colorClass = tagColors[index % tagColors.length];
                    const isSelected = this.selectedTags.includes(tag);
                    const selectedClass = isSelected ? 'ring-2 ring-primary ring-offset-2 bg-primary text-gray-900 font-semibold' : '';
                    return `<button onclick="toggleTagFilter('${tag}')" class="px-4 py-2 ${colorClass} text-sm rounded-full transition-all duration-200 border ${selectedClass} hover:shadow-md">${tag}</button>`;
                }).join('');
            }

            // 获取图标颜色类
            getIconColorClass(color) {
                const colorMap = {
                    'yellow': { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600' },
                    'blue': { bg: 'from-blue-100 to-blue-200', text: 'text-blue-600' },
                    'green': { bg: 'from-green-100 to-green-200', text: 'text-green-600' },
                    'purple': { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600' },
                    'pink': { bg: 'from-pink-100 to-pink-200', text: 'text-pink-600' },
                    'indigo': { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600' },
                    'orange': { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' }
                };
                return colorMap[color] || colorMap['blue'];
            }

            // 获取分类颜色类
            getCategoryColorClass(category) {
                const categoryMap = {
                    '产品思考': { bg: 'bg-yellow-100', text: 'text-yellow-700' },
                    '技术实践': { bg: 'bg-blue-100', text: 'text-blue-700' },
                    '硬件分析': { bg: 'bg-green-100', text: 'text-green-700' },
                    '安全伦理': { bg: 'bg-purple-100', text: 'text-purple-700' },
                    '行业趋势': { bg: 'bg-pink-100', text: 'text-pink-700' },
                    '学习资源': { bg: 'bg-indigo-100', text: 'text-indigo-700' },
                    '项目实战': { bg: 'bg-orange-100', text: 'text-orange-700' },
                    '产品创新': { bg: 'bg-yellow-100', text: 'text-yellow-700' }
                };
                return categoryMap[category] || { bg: 'bg-gray-100', text: 'text-gray-700' };
            }

            // 格式化数字
            formatNumber(num) {
                // 处理 null、undefined 或非数字值
                if (num === null || num === undefined || isNaN(num)) {
                    return '0';
                }
                
                // 确保是数字类型
                const number = Number(num);
                if (isNaN(number)) {
                    return '0';
                }
                
                if (number >= 1000) {
                    return (number / 1000).toFixed(1) + 'k';
                }
                return number.toString();
            }

            // 过滤博客
            filterBlogs(category) {
                this.currentFilter = category;
                this.currentPage = 1;
                this.renderBlogs();
                this.renderRelatedArticlesSidebar();
            }

            // 渲染分页
            renderPagination() {
                const pagination = document.getElementById('pagination');
                if (!pagination) return;

                const totalPages = Math.ceil(this.filteredBlogs.length / this.itemsPerPage);
                if (totalPages <= 1) {
                    pagination.innerHTML = '';
                    return;
                }

                let paginationHTML = '<nav class="flex items-center gap-2">';
                
                // 上一页按钮
                if (this.currentPage > 1) {
                    paginationHTML += `<a href="#" onclick="changePage(${this.currentPage - 1})" class="px-3 py-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors">
                        <i class="fas fa-chevron-left"></i>
                    </a>`;
                }

                // 页码按钮
                const maxVisiblePages = 5;
                let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2));
                let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
                
                if (endPage - startPage + 1 < maxVisiblePages) {
                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
                }

                // 第一页
                if (startPage > 1) {
                    paginationHTML += `<a href="#" onclick="changePage(1)" class="px-3 py-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors">1</a>`;
                    if (startPage > 2) {
                        paginationHTML += `<span class="px-3 py-2 text-gray-400">...</span>`;
                    }
                }

                // 中间页码
                for (let i = startPage; i <= endPage; i++) {
                    if (i === this.currentPage) {
                        paginationHTML += `<a href="#" class="px-3 py-2 bg-primary text-gray-900 rounded-lg font-medium">${i}</a>`;
                    } else {
                        paginationHTML += `<a href="#" onclick="changePage(${i})" class="px-3 py-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors">${i}</a>`;
                    }
                }

                // 最后一页
                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        paginationHTML += `<span class="px-3 py-2 text-gray-400">...</span>`;
                    }
                    paginationHTML += `<a href="#" onclick="changePage(${totalPages})" class="px-3 py-2 text-gray-600 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors">${totalPages}</a>`;
                }

                // 下一页按钮
                if (this.currentPage < totalPages) {
                    paginationHTML += `<a href="#" onclick="changePage(${this.currentPage + 1})" class="px-3 py-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-lg transition-colors">
                        <i class="fas fa-chevron-right"></i>
                    </a>`;
                }

                paginationHTML += '</nav>';
                pagination.innerHTML = paginationHTML;
            }

            // 搜索博客
            searchBlogs(query) {
                this.searchQuery = query;
                this.currentPage = 1;
                this.renderBlogs();
                this.renderRelatedArticlesSidebar();
            }

            // 增加阅读量
            incrementReadCount(blogId) {
                const blog = this.blogs.find(b => b.id === blogId);
                if (blog) {
                    blog.read_count++;
                    localStorage.setItem('blogReadCounts', JSON.stringify(this.blogs.map(b => ({ id: b.id, read_count: b.read_count }))));
                }
            }
            
            // 显示错误信息
            showErrorMessage() {
                const blogList = document.getElementById('blogList');
                if (blogList) {
                    blogList.innerHTML = `
                        <div class="bg-red-50 border border-red-200 rounded-xl p-8 text-center">
                            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-red-800 mb-2">数据加载失败</h3>
                            <p class="text-red-600 mb-4">无法加载博客数据，请检查网络连接或刷新页面重试。</p>
                            <button onclick="location.reload()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors">
                                <i class="fas fa-redo mr-2"></i>刷新页面
                            </button>
                        </div>
                    `;
                }
                
                // 清空侧边栏
                const sidebar = document.getElementById('relatedArticlesSidebar');
                if (sidebar) {
                    sidebar.innerHTML = '<p class="text-gray-500 text-sm">暂无推荐文章</p>';
                }
                
                // 清空标签筛选
                const filterTags = document.getElementById('filterTags');
                if (filterTags) {
                    filterTags.innerHTML = '<p class="text-gray-500 text-sm">暂无标签</p>';
                }
            }
        }

        // 全局变量
        let blogManager;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            try {
                console.log('页面加载完成，开始初始化博客管理器...');
                blogManager = new BlogManager();
                console.log('博客管理器创建成功');
                blogManager.loadBlogData();
            } catch (error) {
                console.error('初始化博客管理器失败:', error);
            }

            // 绑定搜索功能
            const searchInput = document.getElementById('searchInput');
            const fixedSearchInput = document.getElementById('fixedSearchInput');
            
            if (searchInput) {
                let searchTimeout;
                searchInput.addEventListener('input', function(e) {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        blogManager.searchBlogs(e.target.value);
                    }, 500);
                });
                
                // 添加搜索状态提示
                searchInput.addEventListener('input', function(e) {
                    if (e.target.value.trim()) {
                        searchInput.classList.add('searching');
                    } else {
                        searchInput.classList.remove('searching');
                    }
                });
            }
            
            // 绑定固定搜索框功能
            if (fixedSearchInput) {
                let searchTimeout;
                fixedSearchInput.addEventListener('input', function(e) {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        blogManager.searchBlogs(e.target.value);
                    }, 500);
                });
                
                // 同步两个搜索框的值
                searchInput.addEventListener('input', function(e) {
                    fixedSearchInput.value = e.target.value;
                });
                
                fixedSearchInput.addEventListener('input', function(e) {
                    searchInput.value = e.target.value;
                });
            }
            
            // 滚动监听
            let lastScrollTop = 0;
            const fixedSearchBar = document.getElementById('fixedSearchBar');
            const blogHeader = document.querySelector('.blog-header');
            
            window.addEventListener('scroll', function() {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                const headerHeight = blogHeader ? blogHeader.offsetHeight : 300;
                
                // 当滚动超过头部区域时显示固定搜索框
                if (scrollTop > headerHeight - 100) {
                    fixedSearchBar.classList.remove('-translate-y-full');
                    fixedSearchBar.classList.add('translate-y-0');
                } else {
                    fixedSearchBar.classList.add('-translate-y-full');
                    fixedSearchBar.classList.remove('translate-y-0');
                }
                
                lastScrollTop = scrollTop;
            });
            
            // 初始化流体动画
            initFluidAnimationOnLoad();
        });

        // 切换页面
        function changePage(page) {
            if (blogManager) {
                const totalPages = Math.ceil(blogManager.filteredBlogs.length / blogManager.itemsPerPage);
                
                // 边界检查
                if (page < 1 || page > totalPages) {
                    console.warn('无效的页码:', page);
                    return;
                }
                
                blogManager.currentPage = page;
                blogManager.renderBlogs();
                blogManager.renderRelatedArticlesSidebar();
                
                // 滚动到页面顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }

        // 切换标签筛选
        function toggleTagFilter(tag) {
            if (blogManager) {
                const index = blogManager.selectedTags.indexOf(tag);
                if (index > -1) {
                    // 移除标签
                    blogManager.selectedTags.splice(index, 1);
                } else {
                    // 添加标签
                    blogManager.selectedTags.push(tag);
                }
                
                // 重新渲染筛选标签和博客列表
                blogManager.renderFilterTags();
                blogManager.renderBlogs();
                blogManager.renderRelatedArticlesSidebar();
            }
        }

        // 清除所有筛选
        function clearAllFilters() {
            if (blogManager) {
                blogManager.selectedTags = [];
                blogManager.searchQuery = '';
                blogManager.currentFilter = 'all';
                
                // 清空搜索框
                const searchInput = document.getElementById('searchInput');
                const fixedSearchInput = document.getElementById('fixedSearchInput');
                
                if (searchInput) {
                    searchInput.value = '';
                }
                
                if (fixedSearchInput) {
                    fixedSearchInput.value = '';
                }
                
                // 重新渲染
                blogManager.renderFilterTags();
                blogManager.renderBlogs();
                blogManager.renderRelatedArticlesSidebar();
            }
        }

        // 流体动画交互效果
        function initFluidAnimation() {
            const fluidBlobs = document.querySelectorAll('.fluid-blob');
            console.log('找到流体球体数量:', fluidBlobs.length);
            
            if (fluidBlobs.length === 0) {
                console.error('未找到流体球体元素');
                return;
            }
            
            // 确保动画正在运行
            fluidBlobs.forEach((blob, index) => {
                console.log(`球体 ${index + 1} 样式:`, blob.style.animation);
                blob.style.animationPlayState = 'running';
            });
            
            let mouseX = 0, mouseY = 0;
            let animationFrame;
            
            // 鼠标移动时流体跟随效果
            document.addEventListener('mousemove', (e) => {
                mouseX = e.clientX / window.innerWidth;
                mouseY = e.clientY / window.innerHeight;
            });
            
            // 使用requestAnimationFrame优化性能
            function updateFluidAnimation() {
                fluidBlobs.forEach((blob, index) => {
                    const speed = (index + 1) * 0.2;
                    const x = (mouseX - 0.5) * speed * 10;
                    const y = (mouseY - 0.5) * speed * 10;
                    
                    // 简化变换，避免与CSS动画冲突
                    blob.style.transform += ` translate(${x}px, ${y}px)`;
                });
                
                animationFrame = requestAnimationFrame(updateFluidAnimation);
            }
            
            // 启动动画循环
            updateFluidAnimation();
            
            // 页面滚动时流体动画加速
            let scrollTimeout;
            document.addEventListener('scroll', () => {
                fluidBlobs.forEach(blob => {
                    blob.style.animationDuration = '12s';
                });
                
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(() => {
                    fluidBlobs.forEach(blob => {
                        blob.style.animationDuration = '';
                    });
                }, 800);
            });
            
            // 清理函数
            return () => {
                if (animationFrame) {
                    cancelAnimationFrame(animationFrame);
                }
            };
        }

        // 页面加载完成后初始化流体动画
        function initFluidAnimationOnLoad() {
            const cleanup = initFluidAnimation();
            
            // 页面卸载时清理动画
            window.addEventListener('beforeunload', () => {
                if (cleanup) cleanup();
            });
        }
    </script>
    <style>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 搜索状态样式 */
        .searching {
            border-color: #FFE45C !important;
            box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.1) !important;
        }
        
        /* 博客头部优化样式 */
        .blog-header {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
        }
        
        /* 搜索框悬停效果 */
        #searchInput:hover {
            border-color: #d1d5db;
        }
        
        /* 标签按钮悬停效果 */
        #filterTags button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 流体动画优化 */
        .fluid-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .fluid-blob {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, rgba(255, 228, 92, 0.1), rgba(255, 228, 92, 0.05));
            animation: float 20s ease-in-out infinite;
        }
        
        .blob-1 {
            width: 200px;
            height: 200px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }
        
        .blob-2 {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 15%;
            animation-delay: -5s;
        }
        
        .blob-3 {
            width: 100px;
            height: 100px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }
        
        .blob-4 {
            width: 120px;
            height: 120px;
            top: 30%;
            right: 30%;
            animation-delay: -15s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            33% {
                transform: translateY(-20px) rotate(120deg);
            }
            66% {
                transform: translateY(10px) rotate(240deg);
            }
        }
        
        /* 确保布局在所有设备上正确显示 */
        @media (max-width: 1024px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* 确保内容区域有足够的最小高度 */
        .space-y-6 > * + * {
            margin-top: 1.5rem;
        }
        
        /* 优化右侧边栏的显示 */
        .lg\:col-span-1 {
            min-width: 0;
        }
        
        /* 确保右侧边栏内容不会溢出 */
        .space-y-6 > div {
            max-width: 100%;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .searching {
                border-color: #FFE45C !important;
                box-shadow: 0 0 0 2px rgba(255, 228, 92, 0.1) !important;
            }
            
            /* 移动端头部优化 */
            .blog-header h1 {
                font-size: 2.5rem;
                line-height: 1.2;
            }
            
            .blog-header p {
                font-size: 1rem;
                line-height: 1.6;
            }
        }
        
        /* 大屏幕优化 */
        @media (min-width: 1280px) {
            .blog-header h1 {
                font-size: 4rem;
            }
            
            .blog-header p {
                font-size: 1.25rem;
            }
        }
        
        /* 移动端博客卡片优化 */
        @media (max-width: 640px) {
            .line-clamp-2 {
                -webkit-line-clamp: 3;
            }
            
            /* 移动端卡片间距优化 */
            .space-y-6 > * + * {
                margin-top: 1rem;
            }
            
            /* 移动端图标容器优化 */
            .flex-shrink-0 {
                flex-shrink: 0;
            }
            
            /* 移动端文字大小优化 */
            .text-lg {
                font-size: 1rem;
                line-height: 1.4;
            }
            
            /* 移动端摘要文字优化 */
            .text-sm {
                font-size: 0.875rem;
                line-height: 1.5;
            }
            
            /* 移动端卡片内边距优化 */
            .bg-white.rounded-xl {
                padding: 0.75rem;
            }
            
            /* 移动端标题行高优化 */
            .text-lg.font-bold {
                line-height: 1.3;
                margin-bottom: 0.5rem;
            }
            
            /* 移动端摘要行数优化 */
            .line-clamp-2 {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        
        /* 搜索框焦点效果优化 */
        #searchInput:focus {
            border-color: #FFE45C;
            box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.1);
        }
        
        /* 输入框选中文本样式优化 */
        #searchInput::selection {
            background-color: rgba(255, 228, 92, 0.3);
            color: #1f2937;
        }
        
        #searchInput::-moz-selection {
            background-color: rgba(255, 228, 92, 0.3);
            color: #1f2937;
        }
        
        /* 清除筛选按钮悬停效果 */
        #clearFilters:hover {
            background-color: rgba(255, 228, 92, 0.1);
            transform: scale(1.05);
        }
        
        /* 标题文字渐变效果 */
        .blog-header h1 {
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 描述文字优化 */
        .blog-header p {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        /* 固定搜索框样式 */
        #fixedSearchBar {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        #fixedSearchBar.translate-y-0 {
            transform: translateY(0);
        }
        
        #fixedSearchBar.-translate-y-full {
            transform: translateY(-100%);
        }
        
        /* 固定搜索框输入框样式 */
        #fixedSearchInput:focus {
            border-color: #FFE45C;
            box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.1);
        }
        
        #fixedSearchInput:hover {
            border-color: #d1d5db;
        }
        
        #fixedSearchInput::selection {
            background-color: rgba(255, 228, 92, 0.3);
            color: #1f2937;
        }
        
        #fixedSearchInput::-moz-selection {
            background-color: rgba(255, 228, 92, 0.3);
            color: #1f2937;
        }
    </style>
</body>
</html>